
import { useSelector, useDispatch } from 'react-redux'
import { updateCurrentType, updateCurrentIndex } from '../../../../store/modules/schemaSlice'


export default function () {
    const schema: any = useSelector(state => (state as any).schema)
    const dispatch = useDispatch()

    const handleClick = (type: string, index: number) => {
        console.log('cc')
        dispatch(updateCurrentType(type))
        dispatch(updateCurrentIndex(index))
    }
    return (
        <>
            canvas
            <div>
                {
                    schema.data.map((item: any, index: number) => {
                        return (<div style={{ textAlign: 'center' }} key={item.id}>{
                            item.element === 'h1' ? <h1 onClick={() => handleClick(item.type, index)}>{item.props.value}</h1> :
                                item.element === 'h2' ? <h2>{item.props.value}</h2> :
                                    item.element === 'h3' ? <h3>{item.props.value}</h3> :
                                        item.element === 'h4' ? <h4>{item.props.value}</h4> :
                                            item.element === 'h5' ? <h5>{item.props.value}</h5> : ''
                        }</div>)
                    })
                }
            </div>
        </>
    )
}